<template>
  <NThemeEditor>
    <n-config-provider
      class="wh-full"
      :locale="{ ...zhCN, Empty: { description: '暂无数据' } }"
      :date-locale="dateZhCN"
      :theme-overrides="appStore.naiveThemeOverrides"
      :hljs="hljs"
    >
      <router-view v-slot="{ Component, route: curRoute }">
        <component :is="Layout">
          <KeepAlive :include="keepAliveNames">
            <component :is="Component" v-if="!tabStore.reloading" :key="curRoute.fullPath" />
          </KeepAlive>
        </component>
      </router-view>
    </n-config-provider>
  </NThemeEditor>
</template>

<script setup>
// import LightLayout from '@/layouts/light/Layout.vue'
// import DeepLayout from '@/layouts/deep/Layout.vue'
import MainLayout from '@/layouts/main/Layout.vue'
import EmptyComp from '@/layouts/empty/index.vue'
import { zhCN, dateZhCN } from 'naive-ui'
import { useAppStore, useTabStore } from '@/store'
import hljs from 'highlight.js/lib/core'
import javascript from 'highlight.js/lib/languages/javascript'
hljs.registerLanguage('javascript', javascript)

const route = useRoute()
const appStore = useAppStore()
const Layout = computed(() => {
  //防止刷新出现内部路由
  if (!route.matched?.length) return null
  if (route?.meta?.layout === 'empty') {
    return EmptyComp
  } else {
    // if (appStore.isDeep) {
    //   return DeepLayout
    // } else {
    return MainLayout
    // }
  }
})

appStore.setupCssVar()

const tabStore = useTabStore()
const keepAliveNames = computed(() => {
  return tabStore.tabs.filter((item) => item.keepAlive).map((item) => item.name)
})
</script>
<style></style>
